<template>
  <div id="customer-service-group-info">
    <nav aria-label="breadcrumb" role="navigation">
      <ol class="breadcrumb pb-0">
        <li class="breadcrumb-item">
          <router-link to="/admin/customerServiceGroups"
            >客户服务分组信息</router-link
          >
        </li>
      </ol>
    </nav>

    <div class="row">
      <div class="col-12">
        <ul class="nav nav-tabs nav-bordered mb-3" id="myTab" role="tablist">
          <li class="nav-item">
            <a
              class="nav-link active"
              id="group-info-tab"
              data-bs-toggle="tab"
              href="#groupInfo"
              >分组信息</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="login-tab"
              data-bs-toggle="tab"
              href="#customerInfo"
              >客户分组信息</a
            >
          </li>
          <li class="nav-item">
            <a
              class="nav-link"
              id="flight-discount-tab"
              data-bs-toggle="tab"
              href="#usernameInfo"
              >客服代表分组信息</a
            >
          </li>
        </ul>
        <div class="tab-content" id="myTabContent">
          <div class="tab-pane fade show active" id="groupInfo">
            <div class="card">
              <div class="card-body">
                <form class="row">
                  <div class="col">
                    <button
                      type="button"
                      class="btn btn-primary"
                      @click.stop="search()"
                    >
                      查找
                    </button>

                    <a
                      href="javascript:void(0)"
                      class="btn btn-success ms-auto float-end"
                      @click="newGroup()"
                      >新建</a
                    >
                  </div>
                </form>
              </div>
              <div class="card-body bg-light">
                注意：<span class="text-danger"
                  >分组信息不能删除，分组代码不能修改。</span
                >
              </div>
              <table class="table table-striped table-hover table-sm">
                <thead>
                  <tr>
                    <th>ID</th>
                    <th>分组代码</th>
                    <th>分组名称</th>
                    <th>生成时间</th>
                    <th>修改时间</th>
                    <th></th>
                  </tr>
                </thead>
                <tbody>
                  <tr
                    v-for="(info, index) in dataList"
                    :key="info.id"
                  >
                    <td>{{ info.id }}</td>
                    <td>{{ info.groupCode }}</td>
                    <td>{{ info.groupName }}</td>
                    <td>{{ info.createTime }}</td>
                    <td>{{ info.lastUpdate }}</td>
                    <td>
                      <button class="btn btn-warning" @click.stop="edit(index)">
                        修改
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div class="tab-pane fade show" id="customerInfo">
            <customer-service-group-customer
              :groups="dataList"
            ></customer-service-group-customer>
          </div>
          <div class="tab-pane fade show" id="usernameInfo">
            <customer-service-group-representive
              :groups="dataList"
            ></customer-service-group-representive>
          </div>
        </div>
      </div>
    </div>

    <my-modal-customer-service-group
      ref="customerServiceGroupModal"
    ></my-modal-customer-service-group>
  </div>
</template>

<script>
import { mapMutations } from "vuex";
import $ from "jquery";
import {
  searchCustomerServiceGroups,
  saveCustomerServiceGroup,
} from "@/api/admin.js";
import CustomerServiceGroupCustomer from "./customer-service-group-customer.vue";
import CustomerServiceGroupRepresentive from "./customer-service-group-representative.vue";
import MyModalCustomerServiceGroup from "@/components/modal/my-modal-customer-service-group.vue";

export default {
  components: {
    CustomerServiceGroupCustomer,
    CustomerServiceGroupRepresentive,
    MyModalCustomerServiceGroup,
  },
  data() {
    return {
      id: 0,
      code: "",
      name: "",

      dataList: [],
    };
  },
  computed: {
    isAdmin() {
      return this.$store.getters.isAdmin;
    },
  },
  mounted: function () {
    this.search();
  },
  methods: {
    ...mapMutations(["showLoading", "hideLoading"]),
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    search: function () {
      this.showLoading();

      searchCustomerServiceGroups(
        (v) => {
          this.dataList = v.dataList;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    reset: function () {
      this.id = 0;
      this.name = "";
      this.code = "";
    },
    newGroup: function () {
      this.reset();

      const params = {
        id: 0,
        code: "",
        name: "",
      };

      this.$refs.customerServiceGroupModal
        .modal(params)
        .then((v) => {
          this.save(v);
        })
        .catch((ex) => {});
    },
    edit: function (index) {
      const info = this.dataList[index];

      const params = {
        id: info.id,
        code: info.groupCode,
        name: info.groupName
      };

      this.$refs.customerServiceGroupModal
        .modal(params)
        .then((v) => {
          this.save(v);
        })
        .catch((ex) => {});
    },
    save: function (v) {
      const params = {
        id: v.id,
        name: v.name,
        code: v.code,
      };
      saveCustomerServiceGroup(params, (jsonResult) => {
        if (jsonResult.status === "OK") {
          this.showErrMsg("操作成功");
          this.search();
        } else {
          this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
        }
      });
    },
  },
};
</script>
